<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>display过渡处理</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>平滑过渡效果演示</h1>
      <button id="toggle-btn">切换显示/隐藏</button>

      <div class="box" id="box">
        <h2>优雅的过渡效果</h2>
        <p>
          这个盒子通过 opacity 和 transform 实现了平滑的显示/隐藏动画，同时正确处理了 display
          属性的切换时机。
        </p>
      </div>

      <div class="explanation">
        <h3>实现原理说明：</h3>
        <p>• 显示时：先设置 display: block → 下一帧设置 opacity:1 和 transform → 触发过渡动画</p>
        <p>• 隐藏时：先设置 opacity:0 和 transform → 过渡结束后设置 display: none</p>
        <p>• 使用 transitionend 事件确保动画完成后才改变 display 属性</p>
      </div>
    </div>
  </body>
</html>
